<template>
    <div class="bid-form">
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            size="mini"
            label-position="left"
            label-width="65px"
            hide-required-asterisk
            inline-message
            class="demo-ruleForm"
        >
            <el-form-item label="提醒内容:" prop="content">
                <el-input v-model.trim="ruleForm.content" maxlength="20" show-word-limit></el-input>
            </el-form-item>

            <el-form-item label="开始时间:" prop="opentime">
                <el-date-picker
                    v-model="ruleForm.opentime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    :picker-options="pickerOptions"
                    placeholder="请选择开始时间"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item label="备注:" prop="remark">
                <el-input
                    v-model.trim="ruleForm.remark"
                    type="textarea"
                    placeholder="请输入备注内容"
                    resize="none"
                    maxlength="50"
                    show-word-limit
                    :rows="2"
                ></el-input>
            </el-form-item>

            <el-form-item label="" prop="sign">
                <el-checkbox
                class="check-remind"
                v-model="ruleForm.sign"
                true-label="1"
                false-label="0"
                @change="pushChangeHandler"
                >
                    增加微信公众号提醒
                </el-checkbox>
            </el-form-item>

            <el-form-item v-if="ruleForm.sign == '1'" label="提醒时间:" prop="remindtime">
                <el-date-picker
                    v-model="ruleForm.remindtime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions"
                    type="datetime"
                    placeholder="请选择提醒时间"
                >
                </el-date-picker>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import QRCode from 'qrcode';
import CONFIG_PROJECT from '@config/project';

export default {
    props:{
        afterSubmit: {
            type: [Function, Boolean],
            default: false
        },
    },
    data() {
        var checkOpenTime = (rule, value, callback) => {
            var startAt = new Date(value) * 1000 / 1000;
            if (value === '') {
                callback(new Error('请输入开始时间'));
            } else if(startAt < Date.now()){
                callback(new Error('开始时间小于当前时间'));
            }else{
                callback();
            }
        };
        return {
            ruleForm: {
                content: "", //提醒内容
                opentime: "", //开始时间
                remark: "", //备注
                sign: "0", //是否增加微信公众号提醒：0否 1是
                remindtime: "", //微信发送提醒时间
            },
            rules: {
                content: [
                    {
                        required: true,
                        message: "请输入提醒内容",
                        trigger: "blur",
                    },
                ],
                opentime: [
                    {
                        required: true,
                        message: "请输入开标时间",
                        trigger: "blur",
                    },
                    {
                        validator: checkOpenTime, trigger: 'blur'
                    }
                ],
                remindtime: [
                    {
                        required: true,
                        message: "请输入提醒时间",
                        trigger: "blur",
                    },
                ],
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000; //只能选择今天及今天之后的日期
                }
            },
        };
    },
    watch: {
        'ruleForm': {
            deep: true,
            handler(n, o) {
                const that = this;
                let time = new Date(n.remindtime).getTime() || 0;
                let openTime = new Date(n.opentime).getTime() || 0;
                if( time > openTime){
                    that.ruleForm.remindtime = ""
                    showMsgBox('提醒时间不能晚于开标时间！','warning')
                }
            }
        }
    },
    computed: {

    },
    methods: {
        submitForm() {
            const that = this;
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.$ajax({
                        type: "post",
                        url: `${this.$store.state.api.tbUrl}/home/bidreminderadd.json`,
                        data: that.ruleForm,
                        callback: function (data, res) {
                            ShowMsg( '添加成功', 'success');
                            !!that.afterSubmit&&that.afterSubmit();
                        },
                        error: function () {},
                    });
                } else {
                    return false;
                }
            });
        },
        kbDisabledDate(time){
            return time.getTime() < Date.now() - 8.64e7; //只能选择今天及今天之后的日期
        },
        clear(){
            this.ruleForm = {
                content: "", //提醒内容
                opentime: "", //开标时间
                remark: "", //备注
                sign: "0", //是否增加微信公众号提醒：0否 1是
                remindtime: "", //微信发送提醒时间
            }
        },
        pushChangeHandler(val) {
            if (val === '0') {
                return;
            }

            this.$post(`${this.$store.state.api.webUrl}/userlogin/getWeChatInfo.json`, data => {
                // var {official_openid} = data;

                // if (!official_openid) {}
                
                var mobile = this.$store.getters['userinfo/getNickname'],
                    url = `${CONFIG_PROJECT.origins.wxmpQrcode}/bind-from-qrcode?mobile=${mobile}`;

                QRCode.toDataURL(url, (err, src) => {
                    if (!src) {
                        return;
                    }

                    this.$alert(`
                        <div>
                            <div>请用微信扫码，并关注“中财惠瑞”微信公众号，待办提醒会通过此公众号发送</div>
                            <div style="text-align: center;">
                                <img src="${src}" style="width: 164px;"/>
                            </div>
                        </div>
                    `, '扫码绑定', {
                        dangerouslyUseHTMLString: true
                    });
                });
            });
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";
.bid-form {


    ::v-deep .el-form-item__label {
        padding: 0;
        color: $infoColor;
    }
    ::v-deep .el-date-editor.el-input {
        width: 100%;
    }
    ::v-deep .el-form-item {
        margin-bottom: 7px;
    }
    .check-remind {
        color: $infoColor;
    }
}
</style>